<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page isELIgnored="false"%> 
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <title>资料认证</title>
        <meta charset="utf-8">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/bootstrap-theme.min.css" />
        <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/user.css" />
        <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/fonts/font-awesome.min.css">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/ui-box.css">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/ui-base.css">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/ui-color.css">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/appcan.icon.css">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/appcan.control.css">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/weui.css">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/example.css">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/control.css">
        <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jquery-1.8.2.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/stepBar.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/ajaxfileupload.js"></script>
    </head>
    <body class="um-vp " ontouchstart>
        <div id="page_0" class="up ub ub-ver bc-bg" tabindex="0">
            <!--header开始-->
            <div id="header" class="uh bc-text-head ub bc-head">
                <!-- <div class="nav-btn" id="nav-left">
                    <div class="fa fa-angle-left fa-2x shangxia">上一步</div>
                </div> -->
                <h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">资料认证</h1>
                
                <!-- <div class="nav-btn nav-bt" id="nav-right">
                                                            下一步<div class="fa fa-angle-right fa-2x shangxia"></div>
                </div> -->
            </div>
            <div>
            	<!--进度条-->
            	<div  style="" class="text-center">
            	<div id="stepBar" class="ui-stepBar-wrap">
					<div class="ui-stepBar" style="width: 85%;">
						<div class="ui-stepProcess"></div>
					</div>
					<div class="ui-stepInfo-wrap">
						<table class="ui-stepLayout" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td class="ui-stepInfo" style="left: 5px;">
									<a class="ui-stepSequence">1</a>
									<p class="ui-stepName">身份认证</p>
								</td>
								<td class="ui-stepInfo">
									<a class="ui-stepSequence">2</a>
									<p class="ui-stepName">资料填写</p>
								</td>
								<td class="ui-stepInfo" style="right: 30px;">
									<a class="ui-stepSequence">3</a>
									<p class="ui-stepName">待审核</p>
								</td>
							</tr>
						</table>
					</div>
				</div>
				</div>
				
				
				
				
				
                <form action="" method="post">  
                <div id="ren1" style="display:block"> 
                	<div class="weui_cells weui_cells_form">
			            <div class="weui_cell" style="background: #cffcfb;">
			                <div class="weui_cell_hd"><label class="weui_label"><span style="color: red;">*</span>您的姓名</label></div>
			                <div class="weui_cell_bd weui_cell_primary">
			                	<span>${CustomerDto.true_name}</span>
			                </div>
			            </div>
			            <div class="weui_cell" style="background: #cffcfb;">
			                <div class="weui_cell_hd"><label class="weui_label"><span style="color: red;">*</span>性别</label></div>
			                <div class="weui_cell_bd weui_cell_primary">
			                	<span>
			                		<c:if test="${CustomerDto.customer_sex=='0'}">男</c:if>
			                		<c:if test="${CustomerDto.customer_sex=='1'}">女</c:if>
			                	</span>
			                </div>
			            </div>
			            <div class="weui_cell" style="background: #fdfcc8;">
			                <div class="weui_cell_hd"><label class="weui_label"><span style="color: red;">*</span>身份证号</label></div>
			                <div class="weui_cell_bd weui_cell_primary">
			                	<span>${CustomerDto.id_card}</span>
			                </div>
			            </div>
			            <div class="weui_cell" style="background: #cffcfb;">
			                <div class="weui_cell_hd"><label class="weui_label"><span style="color: red;">*</span>身份证正面照</label></div>
			                <div class="weui_cell_bd weui_cell_primary">
			                	<c:if test="${MaterialDto.idcard_1_status=='1'}">
			                		<img src="${MaterialDto.idcard_1}"  class="img-thumbnail" style="width: 100px;"/>
			                    	<input name="idcard_1" id="fileId1" type="hidden" value="${MaterialDto.idcard_1}"/>
			                	</c:if>
			                	<c:if test="${MaterialDto.idcard_1_status=='2'}">
			                		<img src="${MaterialDto.idcard_1}"  class="img-thumbnail" style="width: 100px;"/>
			                    	<span style="color: red;font-size: 80%;">不通过请重新上传！</span>
			                    	<input id="fileId1" name="Idcard" type="file" onchange="uploadfile('fileId1','idcard_1',this)"/>
			                    	<input name="idcard_1" id="idcard_1" type="hidden"/>
			                	</c:if>
			                </div>
			            </div>
			            <div class="weui_cell" style="background: #fdfcc8;">
			                <div class="weui_cell_hd"><label class="weui_label"><span style="color: red;">*</span>身份证反面照</label></div>
			                <div class="weui_cell_bd weui_cell_primary">
			                	<c:if test="${MaterialDto.idcard_2_status=='1'}">
			                		<img src="${MaterialDto.idcard_2}"  class="img-thumbnail" style="width: 100px;"/>
			                    	<input name="idcard_2" id="fileId2" type="hidden" value="${MaterialDto.idcard_2}"/>
			                	</c:if>
			                	<c:if test="${MaterialDto.idcard_2_status=='2'}">
			                		<img src="${MaterialDto.idcard_2}"  class="img-thumbnail" style="width: 100px;"/>
			                    	<span style="color: red;font-size: 80%;">不通过请重新上传！</span>
			                    	<input id="fileId2" name="Idcard" type="file" onchange="uploadfile('fileId2','idcard_2',this)"/>
			                    	<input name="idcard_2" id="idcard_2" type="hidden"/>
			                	</c:if>
			                </div>
			            </div>
			            <div class="weui_cell" style="background: #cffcfb;">
			                <div class="weui_cell_hd"><label class="weui_label"><span style="color: red;">*</span>银行卡正面照</label></div>
			                <div class="weui_cell_bd weui_cell_primary">
			                	<c:if test="${MaterialDto.bank_card_1_status=='1'}">
			                		<img src="${MaterialDto.bank_card_1}"  class="img-thumbnail" style="width: 100px;"/>
			                    	<input name="bank_card_1" id="fileId3" type="hidden" value="${MaterialDto.bank_card_1}"/>
			                	</c:if>
			                	<c:if test="${MaterialDto.bank_card_1_status=='2'}">
			                		<img src="${MaterialDto.bank_card_1}"  class="img-thumbnail" style="width: 100px;"/>
			                    	<span style="color: red;font-size: 80%;">不通过请重新上传！</span>
			                    	<input id="fileId3" name="Bank" type="file" onchange="uploadfile2('fileId3','bank_card_1',this)"/>
			                    	<input name="bank_card_1" id="bank_card_1" type="hidden"/>
			                	</c:if>
			                </div>
			            </div>
			            <div class="weui_cell" style="background: #fdfcc8;">
			                <div class="weui_cell_hd"><label class="weui_label"><span style="color: red;">*</span>银行卡反面照</label></div>
			                <div class="weui_cell_bd weui_cell_primary">
			                	<c:if test="${MaterialDto.bank_card_2_status=='1'}">
			                		<img src="${MaterialDto.bank_card_2}"  class="img-thumbnail" style="width: 100px;"/>
			                    	<input name="bank_card_2" id="fileId4" type="hidden" value="${MaterialDto.bank_card_2}"/>
			                	</c:if>
			                	<c:if test="${MaterialDto.bank_card_2_status=='2'}">
			                		<img src="${MaterialDto.bank_card_2}"  class="img-thumbnail" style="width: 100px;"/>
			                    	<span style="color: red;font-size: 80%;">不通过请重新上传！</span>
			                    	<input id="fileId4" name="Bank" type="file" onchange="uploadfile2('fileId4','bank_card_2',this)"/>
			                    	<input name="bank_card_2" id="bank_card_2" type="hidden"/>
			                	</c:if>
			                </div>
			            </div>
        			</div>
                    <div class="text-center tijiao">
                        <input type="button"  class="btn btn-default  btn-xs" onclick="xiayibu()" value="下一步"/>
                    </div>
                    <script>
                    	function xiayibu(){
                    		if($("#fileId1").val()==""||$("#fileId2").val()==""||$("#fileId3").val()==""||$("#fileId4").val()==""){
                    			alert("您的资料未上传完整！");
                    		}else{
                    			var ren1 = document.getElementById("ren1");
				        		var ren2 = document.getElementById("ren2");
				        		ren1.style.display = "none";
				        		ren2.style.display = "block";
									stepBar.init("stepBar", {
										step : 2,
										change : true,
										animation : true
									});
                    		}
			        		
			        	}
                    </script>
                </div>
                
                <div id="ren2" style="display:none"> 
                	<div class="weui_cells weui_cells_form">
			            <div class="weui_cell" style="background: #cffcfb;">
			                <div class="weui_cell_hd"><label class="weui_label"><span style="color: red;">*</span>邮箱号码</label></div>
			                <div class="weui_cell_bd weui_cell_primary">
			                	<span>${CustomerDto.email}</span>
			                </div>
			            </div>
			            <div class="weui_cell" style="background: #fdfcc8;">
			                <div class="weui_cell_hd"><label class="weui_label"><span style="color: red;">*</span>现居住地址</label></div>
			                <div class="weui_cell_bd weui_cell_primary">
			                	<span>${CustomerDto.address}</span>
			                </div>
			            </div>
			            <div class="weui_cell" style="background: #cffcfb;">
			                <div class="weui_cell_hd"><label class="weui_label"><span style="color: red;">*</span>手机服务密码</label></div>
			                <div class="weui_cell_bd weui_cell_primary">
			                	<span>${MaterialDto.phone_service_code}</span>
			                </div>
			            </div>
			            <div class="weui_cell" style="background: #fdfcc8;">
			                <div class="weui_cell_hd"><label class="weui_label"><span style="color: red;">*</span>支付宝账号</label></div>
			                <div class="weui_cell_bd weui_cell_primary">
			                	<span>${CustomerDto.zfb_code}</span>
			                </div>
			            </div>
			            <div class="weui_cell" style="background: #cffcfb;">
			                <div class="weui_cell_hd"><label class="weui_label"><span style="color: red;">*</span>微信账号</label></div>
			                <div class="weui_cell_bd weui_cell_primary">
			                	<span>${CustomerDto.wx_code}</span>
			                </div>
			            </div>
			            <div class="weui_cell" style="background: #fdfcc8;">
			                <div class="weui_cell_hd"><label class="weui_label"><span style="color: red;">*</span>银联账号</label></div>
			                <div class="weui_cell_bd weui_cell_primary">
			                	<span>${CustomerDto.yl_code}</span>
			                </div>
			            </div>
        			</div>
                    <div class="text-center tijiao">
                        <input type="button" class="btn btn-default btn-xs" value="提     交" onclick="tijiao()"/>
                    </div>
                </div>
                <div id="ren3" style="display:none">
                    <div class="text-center" style="margin-top: 50px;font-size: 22px">
                        <p>您的资料正在审核当中，请耐心等候</p>
                        <button type="button" class="btn btn-default btn-xs"  onclick="location.href='${pageContext.request.contextPath}/consumer/customer/index'" style="margin-top: 30px">返回首页</button>
                    </div>
                </div>
                </form>
            </div>

        </div>
       	 <!--验证是否为空-->
        <script>
        	function kong(a){
        		if(a.value==""){
        			a.placeholder="不能为空！";
        		}
        	}
        </script>
         <script type="text/javascript">
	     //异步上传图片
		    function uploadfile(fileId,id,object){
		    	
		    	$.ajaxFileUpload ({
		    		type : 'post' ,
		    		secureuri:false,//一般设置为false
		    		fileElementId:fileId,//input id
		    	  	url :  '${pageContext.request.contextPath}/util/uploadIdcard',
		    	    dataType: 'text' ,
		    	    success:function(data){
		    	    	$("#"+fileId).parent().find("img").attr({"src":data,"width":"100px","height":"100px"});
		    	    	$("#"+id).val(data);
		    	    }
		    	}); 
		    }
		    function uploadfile2(fileId,id,object){
		    	
		    	$.ajaxFileUpload ({
		    		type : 'post' ,
		    		secureuri:false,//一般设置为false
		    		fileElementId:fileId,//input id
		    	  	url :  '${pageContext.request.contextPath}/util/uploadBank',
		    	    dataType: 'text' ,
		    	    success:function(data){
		    	    	$("#"+fileId).parent().find("img").attr({"src":data,"width":"100px","height":"100px"});
		    	    	$("#"+id).val(data);
		    	    }
		    	}); 
		    }
	    </script>
    
		<script type="text/javascript">
			$(function(){
				stepBar.init("stepBar", {
					step : 1,
					change : true,
					animation : true
				});
			
			});
		</script>
		<script>
        	
        	function tijiao(){
        		$.ajax({
					type:"post",
					dataType: 'text',
					url:"${pageContext.request.contextPath}/consumer/customer/idcard_do2",
					data:$("form").serialize(),
					success:function(data){
						if(data=='1'){
							var ren3 = document.getElementById("ren3");
			        		var ren2 = document.getElementById("ren2");
			        		ren2.style.display = "none";
			        		ren3.style.display = "block";
								stepBar.init("stepBar", {
									step : 3,
									change : true,
									animation : true
								});
						}else{
							alert("出现错误！！");
							window.location.href="${pageContext.request.contextPath}/consumer/customer/index";
						}
					}
				});
        	}
        </script>
    </body>
</html>